<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程热度统计</title>
    <script src="/jquery/jquery-3.2.1.min.js"></script>
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/echarts/echarts.js"></script>
    <script src="/js/statistics/course/course-heat.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100%;
            height: 1030px;
        }
        .list{
            width: 1650px;
            height: 50px;
            margin-left: 20px;
            background-color:rgb(243,243,243);
        }
        .list-left{
            width: 150px;
            height: 30px;
            margin-top: 10px;
            float: left;
        }
        .list-left-left{
            width: 10px;
            height: 30px;
            float: left;
            background: green;
        }
        .list-left-right{
            width: 120px;
            height: 30px;
            font-size: 14px;
            line-height: 30px;
            float: left;
            text-indent: 5px;
        }
        .list-right{
            float: right;
            margin-top: 5px;
            margin-right: 45px;
        }
        .query{
            width: 1650px;
            height: 100px;
            margin-top: 20px;
            margin-left: 20px;
        }
        .layui-col-md11{
            width: 100%;
        }
        .layui-card-header{
            background-color:rgb(243,243,243);
        }
        .record{
            width: 1650px;
            height: 821px;
            margin-top: 40px;
            margin-left: 20px;
            background-color:rgb(243,243,243);
        }
        img{
            width: 100px;
            height: 116px;
        }
        .layui-card-body td{
            width: 300px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            border: 1px solid #F3F3F3;
        }
        .btns{
            margin: 10px 20px;
            width: 1000px;
            height: 50px;
        }
        .layui-btn-lg{
            width: 130px;
            height: 46px;
        }
        .btn_style{
            color: #595458;
            border-color: #e8e8e8;
            background-color: #fff;
        }
        .btn_default{
            color: #fff;
            background-color: #009688;
        }
        .btn_onclick{
            color: #fff;
            background-color: #009688;
        }
        .btn_remove{
            color: #595458;
            background-color: #fff;
        }
        .layui-btn:hover{
            color: #595458;
            border-color: #009688;
        }
        .btn_onclick:hover{
            color: #fff;
        }
        .btn_remove:hover{
            color: #595458;
            border-color: #009688;
        }
    </style>
</head>
<body>
<div class="box">
    <!--商品点击热度-->
    <div class="list">
        <div class="list-left">
            <div class="list-left-left"></div>
            <p class="list-left-right">评论热度排行</p>
        </div>
        <div class="list-right">
            <div class="list-right-left layui-btn layui-icon layui-icon-refresh" onclick="refresh()">&nbsp;刷新</div>
            <div class="list-right-right layui-btn layui-icon layui-icon-left" id="goBack">&nbsp;返回</div>
        </div>
    </div>
    <div class="btns">
        <button class="layui-btn layui-btn-lg btn_style btn_default" id="commodityReview">商品评论</button>
        <button class="layui-btn layui-btn-lg btn_style" id="courseReview">课程评论</button>
        <button class="layui-btn layui-btn-lg btn_style" id="circleReview">微圈评论</button>
    </div>
    <div class="layui-row query">
        <div class="layui-col-md11">
            <div class="layui-card headerCenter">
                <div class="layui-card-header backColor">
                    <i class="layui-icon">&#xe613;</i>
                    评论热度排行
                </div>
                <div class="layui-card-body">
                    <table style="margin-left: -15px">
                        <tr id="product">
                            <td></td>
                        </tr>
                        <tr style="background:#F3F3F3" id="hits">
                            <td></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!--Echars-->
    <div class="record">
        <div style="float: left;">
            <p style="margin-left: 20px;font-size: 15px;font-weight: 600">评论热度排行图表</p>
            <p style="margin-left: 20px;font-size: 12px;color:#D3D3D3">思云产品</p>
        </div>
        <div style="height: 90px;width: 200px; float: right;  text-align: center; margin-top: 25px;margin-right: 100px" id="day">
            <i onclick="circular()" class="layui-icon layui-icon-menu-fill" style="font-size: 20px;margin-right: 5px"></i>
            <i onclick="strip()" class="layui-icon layui-icon-chart" style="font-size: 20px;margin-right: 5px"></i>
            <i onclick="column()" class="layui-icon layui-icon-template-1" style="font-size: 20px;margin-right: 5px"></i>
            <i onclick="reload()" class="layui-icon layui-icon-refresh" style="font-size: 20px;margin-right: 5px"></i>
            <i onclick="downLoad()" class="layui-icon layui-icon-export" style="font-size: 20px;"></i>
        </div>
        <div id="main" style="width: 1660px; height: 500px;float: left;margin-top: -52px"></div>
    </div>
</div>

<!-- 返回 -->
</body>
<script>
    var categroys = [];
    var titles = [];
    var hits = [];
    var btn = 0;
    layui.use(['jquery','layer','table','form','upload'],function(){
        var $=layui.jquery;
        var layer=layui.layer;
        getHits();
        //按钮样式
        $('.btn_style').on('click',function () {
            $(this).addClass('btn_onclick').siblings().removeClass('btn_onclick');
            $(this).removeClass('btn_remove').siblings().addClass('btn_remove');
        })
        $('#commodityReview').on('click',function () {
            btn = 0;
            getHits();
        })
        $('#courseReview').on('click',function () {
            btn = 1;
            getHits();
        })
        $('#circleReview').on('click',function () {
            btn = 2;
            getHits();
        })
        function getHits() {//商品
            if(btn == 0){
                $.ajax({
                    url: '/SyStatistical/getCommodityReview',
                    dataType: 'json',
                    type: 'post',
                    success: function (data) {
                        var data = data.data;
                        setVal(data);
                    }
                });
            }else if(btn == 1){//课程
                $.ajax({
                    url: '/SyStatistical/getCourseReview',
                    dataType: 'json',
                    type: 'post',
                    success: function (data) {
                        var data = data.data;
                        setVal(data);
                    }
                });
            }else if(btn == 2){//微圈
                $.ajax({
                    url: '/SyStatistical/getCircleReview',
                    dataType: 'json',
                    type: 'post',
                    success: function (data) {
                        var data = data.data;
                        setVal(data);
                    }
                });
            }
        }
        function setVal(data){
            categroys = [];
            titles = [];
            hits = [];
            var count;
            if(data.length > 5){
                count = 5;
            }else {
                count = data.length;
            }
            $('#product').text('');
            // $('#product').append('<td>' + '名称' + '</td>');
            $('#hits').text('');
            $('#hits').append('<td>' + '评论数量' + '</td>');
            if(btn == 0){
                $('#product').append('<td>' + '商品名称' + '</td>');
            }else if(btn == 1){
                $('#product').append('<td>' + '课程名称' + '</td>');
            }else if(btn == 2){
                $('#product').append('<td>' + '微圈标题' + '</td>');
            }
            for (var i = 0; i < count; i++) {
                /*if(data[i].hits == null){
                    data[i].hits = 0;
                }*/
                $('#product').append('<td>' + data[i].title + '</td>');
                $('#hits').append('<td>' + data[i].count + '</td>');
                titles[i] = data[i].title;
                hits[i] = data[i].count;
                var cate = {value:hits[i],name:titles[i]}
                categroys[i] = cate;
                circular();
            }
        }
        //刷新
        refresh=function refresh(){
            location.reload();
        }
        //返回按钮
        $('#goBack').click(function () {
            var iframe = parent.$('.iframe');
            $.each(iframe,function (i,item) {
                if('评论热度排行' == $(item).attr('_href')){
                    parent.$('#beforeHref').val($(item).attr('_href'));
                    parent.beforeHref();
                    return;
                }
            });
        });

        //统计图刷新
        reload = function reload(){
            getHits()
        }
    })

    var option;
    var myChart;
    //扇形统计图
    function circular(){
        if (myChart != null && myChart != "" && myChart != undefined) {
            myChart.dispose();//销毁
        }
        var chartDom = document.getElementById('main');
        myChart = echarts.init(chartDom);
        option = {
            tooltip: {},
            series: [
                {
                    type: 'pie',
                    data: categroys,
                    roseType: 'area'
                }
            ],
            xAxis: {
                show: false
            },
            yAxis: {
                show: false
            }
        };
        option && myChart.setOption(option);
    }
    //折线统计图
    function strip() {
        if (myChart != null && myChart != "" && myChart != undefined) {
            myChart.dispose();//销毁
        }
        var chartDom = document.getElementById('main');
        myChart = echarts.init(chartDom);
        option = {
            tooltip: {},
            xAxis: {
                show: true,
                type: 'category',
                data: titles
            },
            yAxis: {
                show: true,
                type: 'value'
            },
            series: [
                {
                    data: hits,
                    type: 'line'
                }
            ]
        };
        option && myChart.setOption(option);
    }
    //柱状统计图
    function column(){
        if (myChart != null && myChart != "" && myChart != undefined) {
            myChart.dispose();//销毁
        }
        var chartDom = document.getElementById('main');
        myChart = echarts.init(chartDom);
        option = {
            tooltip: {},
            xAxis: {
                show: true,
                data: titles
            },
            yAxis: {show: true},
            series: [
                {
                    type: 'bar',
                    data: hits
                }
            ]
        };
        option && myChart.setOption(option);
    }

    //下载图表
    function downLoad(){
        var canvas = document.getElementsByTagName("canvas")
        if (canvas && canvas.length > 0) {
            var oA = document.createElement("a")
            oA.download = "Echarts图表" + ".png"
            oA.href = canvas[0].toDataURL("image/png")
            document.body.appendChild(oA)
            oA.click()
            oA.remove()
        }
    }
</script>
</html>